<template>
  <div class="content">
    <div class="strategyMenus">
      <div class="strategyMenusBut">
      </div>
      <div class="btns">
        <el-date-picker
            v-model="exportLogsTimeHorizonValue"
            :picker-options="pickerOptions"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            @change="selectExportLogsTimeHorizonValueEvent"
        >
        </el-date-picker>
        <wj-Button type="save" @click="handleExport">导出</wj-Button>
      </div>
      <div class="strategyMenusSearch">
        <el-input
            placeholder="请输关键字检索"
            type="text"
            v-model="searchValue"
            @keyup.enter.native="
						(e) => {
							e.target.blur();
						}
					"
            @blur="searchEvent"
        ></el-input>
      </div>
    </div>
    <div class="strategyList">
      <el-table
          :data="this.tableData"
          selection
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="time"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="type"
            label="接收/发送"
            width="150"
            :formatter="typeFormat">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="phoneOwnership"
            label="手机号归属"
            width="140">
        </el-table-column>
        <el-table-column
            prop="msgContent"
            label="短信内容">
        </el-table-column>
      </el-table>
    </div>
    <div class="strategyPage">
      <el-pagination
          background
          :page-size="size"
          @current-change="handlePage"
          layout="total, prev, pager, next, jumper"
          :total="this.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {get_simHistory, simHistory_export} from "@/utils/request/api";

export default {
  name: "SimHistory",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      // 搜索
      searchValue: "",
      page: 1,
      size: 10,
      total: 0,
      exportLogsTimeHorizonValue: [], // 导出日志时间范围
      pickerOptions: {
        disabledDate(time) {
          // 禁止选择未来的时间
          return (time.getTime() - (24 * 60 * 60 * 1000)) > Date.now();
        },
      },
    }
  },
  mounted() {
    this.getAllSimHistory(1,10);
  },
  methods: {
    selectExportLogsTimeHorizonValueEvent(date) {
      if (date !== null && date !== undefined && date.length > 0) {
        this.getAllSimHistory(1, this.pageSize, this.searchValue, date[0], date[1]);
      } else {
        this.getAllSimHistory(1, this.pageSize, this.searchValue);
      }
    },
    handleExport() {
      if (this.tableData == null || this.tableData.length <= 0) {
        this.$msg.warning("暂无可导出的数据！");
      } else {
           // 导出选中数据
        if (this.multipleSelection.length !== 0) {
          var idList = [];
          this.multipleSelection.forEach((item) => {
            idList.push(item.id);
          });
          this.exportSimHistory(idList);
        } else if (this.exportLogsTimeHorizonValue !== undefined && this.exportLogsTimeHorizonValue.length !== 0) {
          // 导出时间段的数据
          this.exportSimHistory([], this.exportLogsTimeHorizonValue[0], this.exportLogsTimeHorizonValue[1]);
        } else {
          this.exportSimHistory([]);
        }
      }
    },
    // 表格选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
// 搜索
    searchEvent() {
      this.total = 0;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getAllSimHistory(this.pageNum, this.pageSize, this.searchValue);
    },
    typeFormat(row, column, cellValue) {
      if (cellValue === 0) {
        return '接收';
      } else if (cellValue === 1) {
        return '发送';
      }
      // 如果 prop 的值不是 1 或 2，则返回空字符串
      return '未知';
    },
    handlePage(val) {
      if (this.exportLogsTimeHorizonValue !==undefined || this.exportLogsTimeHorizonValue.length !== 0) {
        this.getAllSimHistory(val, this.size, this.searchValue, this.exportLogsTimeHorizonValue[0], this.exportLogsTimeHorizonValue[1]);
      } else {
        this.getAllSimHistory(val, this.size, this.searchValue);
      }
    },
    actualDownload(res) {
      let content = res.data;
      let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
      let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
      if ("download" in document.createElement("a")) {
        // 非IE下载
        let elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName);
      }
      // 重新查询
      this.currentPage = 1;
      this.total = 0;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getAllSimHistory(this.pageNum, this.pageSize );
    },
    getAllSimHistory(pageNum, pageSize, keyword, startDateStr, endDateStr) {
      get_simHistory({page: pageNum, size: pageSize, keyword, startDateStr, endDateStr})
          .then(res => {
            if (res.code === 200) {
              this.tableData = res.data.simHistoryList;
              this.total = res.data.total;
            } else {
              this.$msg.error("获取sim卡的历史信息错误，请稍后重试！");
            }
          });
    },
    exportSimHistory(idList, startDateStr, endDateStr) {
      simHistory_export({simHistoryIds: decodeURIComponent(idList), startDateStr, endDateStr})
          .then(res => {
            this.actualDownload(res)
          });
    },
  }
};

</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.strategyList {
  width: 100%;
  height: calc(100% - 48px - 48px);
  padding: 28px 0;
  box-sizing: border-box;

  /deep/ .el-table {
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
  }

  /deep/ .el-link {
    margin: 0 12px 0 0;
  }

  /deep/ .el-table .forbidden-cell-strategy .cell {
    color: #67c23a;
  }

  .wj-icon-shoucang {
    color: #ea9518;
  }
}

.strategyPage {
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.strategyMenus {
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .strategyMenusBut {
    width: 55%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    div {
      width: 145px;
      height: 36px;
      font-size: 14px;
      line-height: 36px;
      border: 1px solid #d8d8d8;
      border-right: none;
      background: #f2f2f2;
      color: #82b808;
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      span {
        display: inline-block;
        height: 18px;
        line-height: 18px;
      }
      span:first-child {
        margin-right: 12px;
      }
      span.tabNumber {
        border: 1px solid #d8d8d8;
        padding: 2px 4px;
        text-align: center;
      }
    }
    div:last-child {
      border-right: 1px solid #d8d8d8;
    }
    div.tabIndexActive {
      background: #fff;
      color: #333333;
    }
    div:hover {
      cursor: pointer;
    }
  }
  .btns {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    [class*="wj-button-"] {
      font-size: 14px;
      padding: 8px 18px;
      margin-left: 18px;
    }
  }
  .strategyMenusSearch {
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    /deep/ .el-input {
      font-size: 16px;
    }
  }
}
</style>